<template>
  <!--    创建面试题   -->
  <page-wrap
    back
    :title="pageTitle"
    hide-tab
    stay-still
    :hideSafeArea="true"
    :bg-color="uNavColor"
  >
    <InterViewNavbg />

    <view class="header">
      <span class="positionName">{{ positionName }}</span>
      <span class="questionNum">{{ questionNum }}</span>
    </view>

    <view class="has-data-view">
      <scroll-view scroll-y class="scrollViewStyle" @scrolltolower="loadMore">
        <QuestionCell
          v-for="(item, index) in list"
          :key="index"
          :itemObj="item"
          @onClickDelete="handleDelete"
          :index="index"
          @onClickUp="handleClickUp"
          @onClickDown="handleClickDown"
        >
        </QuestionCell>

        <u-loadmore
          v-if="list.length > 0 || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && list.length <= 0"
          :baseImg="emptyImg"
          text="当前题库为空"
          :fontWeight="400"
          label="请点击下方“新增题目”"
        />
      </scroll-view>

      <view class="has-data-container">
        <view class="del-question" @click="onClickDel"> 删除题库 </view>
        <view class="create-question" @click="onClickNewCreate">
          新增题目
        </view>
      </view>
    </view>
    <u-modal
      v-model="showTip"
      :content="tipContent"
      :show-cancel-button="true"
      @confirm="delDate"
    ></u-modal>
    <u-action-sheet
      :list="actionlist"
      v-model="showActionSheet"
      @click="handleActionShellClick"
    ></u-action-sheet>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import {
  questionListByPage,
  removeQuestion,
  repoInfo,
  questionSort,
  deleteCompanyRepo,
} from "@/api/modules/company";
import QuestionCell from "./components/QuestionCell.vue";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    Empty,
    InterViewNavbg,
    QuestionCell,
  },

  data() {
    return {
      showTip: false,
      tipContent:
        "删除题库后，已经创建的面试不会受到影响，面试者在面试时间内仍可正常进行面试，确定删除吗？",

      showActionSheet: false,
      actionlist: [
        {
          text: "系统推荐题目",
        },
        {
          text: "自定义建题",
        },
      ],

      // personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      //companyId: 1001,

      repoId: undefined, //题库id
      ylPositionId: undefined,
      pageTitle: "面试题",
      questionNum: "题目数量：",
      positionName: "关联职业：",
      repoTitle: "题库标题",
      form: {},
      list: [],
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      loaded: false,
      moreLoading: "loadmore",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      triggered: false,
      switchNum: 1,
    };
  },
  onShow() {
    console.log("问题列表", "onShow");
    this.reqRepoInfo();
    this.getData(false);
  },
  mounted() {
    console.log("问题列表", "mounted");
  },
  onLoad(options) {
    console.log("问题列表", "onLoad");
    if (options && options.repoId) {
      this.repoId = options.repoId;
      this.reqRepoInfo();
      this.getData(false);
    }
    if (options && options.title) {
      this.pageTitle = options.title;
    }
  },
  filters: {},
  computed: {},
  methods: {
    // 点击上移
    handleClickUp(val) {
      var index = val.index - 1;
      if (index == 0) {
        return;
      }
      var beforeSortValue = 0;
      var afterSortValue = this.list[index - 1].sortValue;
      if (index - 1 > 0) {
        beforeSortValue = this.list[index - 2].sortValue;
      }
      this.reqQuestionSort(
        index,
        true,
        val.item.id,
        beforeSortValue,
        afterSortValue
      );
    },

    sortUp(index) {
      let arr = this.list;
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },

    sortDown(index) {
      let arr = this.list;
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },

    reqQuestionSort(index, isUp, requestId, beforeSortValue, afterSortValue) {
      const params = {
        requestId: requestId,
        beforeSortValue: beforeSortValue,
        afterSortValue: afterSortValue,
      };
      questionSort(params)
        .then((res) => {
          if (res.code == 200) {
            if (isUp) {
              this.sortUp(index);
            } else {
              this.sortDown(index);
            }
          }
        })
        .finally(() => {});
    },

    // 点击下移
    handleClickDown(val) {
      var index = val.index - 1;
      if (index == this.list.length - 1) {
        return;
      }
      var beforeSortValue = this.list[index + 1].sortValue;
      var afterSortValue = 0;
      if (index + 1 < this.list.length - 1) {
        afterSortValue = this.list[index + 2].sortValue;
      }
      this.reqQuestionSort(
        index,
        false,
        val.item.id,
        beforeSortValue,
        afterSortValue
      );
    },

    // 获取题库详情信息
    reqRepoInfo() {
      if (!this.repoId) {
        console.log("问题列表", "repoId是空的，不能获取题目详情信息");
        return;
      }
      const params = {
        id: this.repoId,
      };
      repoInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionName = "关联职业：" + res.data.positionName;
            this.questionNum = "题目数量：" + res.data.requestCount;
            this.ylPositionId = res.data.ylPositionId;
          }
        })
        .finally(() => {});
    },

    loadMore() {
      this.getData(true);
    },

    // 点击删除按钮
    handleDelete(val) {
      var that = this;

      uni.showModal({
        title: "提示",
        content: "确定删除当前问题吗？",
        success: function (res) {
          if (res.confirm) {
            that.reqRemoveQuestion(val.id);
          } else if (res.cancel) {
          }
        },
      });
    },

    // 删除问题
    reqRemoveQuestion(id) {
      const params = {
        id: id,
      };
      removeQuestion(params)
        .then((res) => {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
          if (res.code == 200) {
            this.reqRepoInfo();
            this.getData(false);
          } else {
          }
        })
        .finally(() => {});
    },

    // 获取数据列表
    getData(isMore) {
      if (this.moreLoading == "loading" || !this.repoId) return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        this.pageParams.pageNo = 1; // 刷新数据
      }

      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        companyId: this.companyId,
        repoId: this.repoId,
      };

      this.moreLoading = "loading";
      questionListByPage(params)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {});
    },

    // 删除题库
    onClickDel() {
      this.showTip = true;
    },
    delDate() {
      let param = {
        id: this.repoId,
      };
      deleteCompanyRepo(param).then((res) => {
        if (res && res.code == 200) {
          uni.navigateBack();
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },

    // 创建题库
    onClickNewCreate() {
      this.showActionSheet = true;
    },
    handleActionShellClick(index) {
      if (index == 0) {
        this.onClickSelect();
      } else if (index == 1) {
        this.onClickCreate();
      }
    },

    // 在总库选择
    onClickSelect() {
      let url =
        "/pagesSub/companyCenter/interviewAI/selectInterviewQuestions?repoId=" +
        this.repoId +
        "&ylPositionId=" +
        this.ylPositionId;
      uni.navigateTo({
        url: url,
      });

      // const params = {
      //   pageNo: 1,
      //   pageSize: 99,
      //   companyId: this.companyId,
      //   repoId: this.repoId,
      // };

      // questionListByPage(params).then((res) => {
      //   if (res.code == 200) {
      //     var a = [];
      //     res.data.forEach(element => {
      //       a.push(element.id);
      //     });

      //     console.log("🚀 ~ file: interviewQuestionBankDetail.vue:348 ~ questionListByPage ~ a:", a)
      //     let url = "/pagesSub/companyCenter/interviewAI/selectInterviewQuestions?repoId=" + this.repoId + '&ylPositionId='+this.ylPositionId + '&ids=' + JSON.stringify(a);
      //     uni.navigateTo({
      //       url: url,
      //     });
      //   } else {
      //     uni.showToast({
      //       title: res.status_desc,
      //       icon: "none",
      //     });
      //   }
      // });
    },

    // 点击手动创建
    onClickCreate() {
      let url =
        "/pagesSub/companyCenter/interviewAI/createInterviewQuestion?repoId=" +
        this.repoId;

      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.has-data-container {
  z-index: 20;
  display: flex;
  position: absolute;
  bottom: 96rpx;
  justify-content: space-around;
  width: 100%;
  .create-question {
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 28rpx;
    height: 88rpx;
    background: #f75a3e;
    border-radius: 44rpx;
    width: 60%;
    margin-right: 16rpx;
  }

  .del-question {
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    line-height: 88rpx;
    color: #f75a3e;
    font-size: 28rpx;
    height: 88rpx;
    background: #ffebe7;
    border-radius: 44rpx;
    border: 2rpx solid #f75a3e;
    width: 30%;
  }
}

.scrollViewStyle {
  box-sizing: border-box;
  height: calc(100vh - 500rpx);
  // height: calc(100vh - 500rpx);
}

.header {
  display: flex;
  flex-direction: column;
  height: 128rpx;
  background-color: white;
  border-radius: 24rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  color: #999999;
  font-size: 28rpx;
  padding-left: 36rpx;
  justify-content: center;

  .positionName {
    color: #999999;
    font-size: 28rpx;
  }

  .questionNum {
    color: #999999;
    font-size: 28rpx;
    margin-top: 8rpx;
  }
}
</style>
